<template>
  <el-table :data="cTableColumn" :loading="loading" element-loading-text="加载中..." border border-radius
  >
    <el-table-column
      align="center"
      prop="rowTitle"
      label="游戏名称">
    </el-table-column>
    <el-table-column
      align="center"
      :key="game"
      v-for="game in tableColumn"
      :label="toBeiBoName(game)">
      <template slot-scope="{row}">
        <template v-if="row.rowTitle === '公司盈亏'">
          <money-text :negate="true" :value="row[game]"></money-text>
        </template>
        <template v-else>
          {{row[game] | currency}}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script type="text/jsx">

  import {gameReportApi as getApi} from '@/services/api/report';

  import {grid} from '@/build';

  export default {

    name: "win-lose",

    mixins: [grid],

    props: ['type'],

    data() {
      return {
        toBeiBoName: _.toBeiBoName,
        filters: {
          date: undefined,
        },
        tableData: {
          list: [],
          total: 0,
        },
      };
    },

    watch: {
      type: {
        handler(type) {
          switch (type) {
            case 1:
              this.filters.date = _.toTimestamp({start: [0, 'month'], end: [0, 'month'], startEnd: true});
              break;
            case 2:
              this.filters.date = _.toTimestamp({start: [-1, 'month'], end: [-1, 'month'], startEnd: true});
              break;
            case 3:
              this.filters.date = _.toTimestamp({start: [0, 'day'], end: [0, 'day'], startEnd: true});
              break;
            case 4:
              this.filters.date = _.toTimestamp({start: [-1, 'day'], end: [-1, 'day'], startEnd: true});
              break;
          }

          this.$nextTick(() => {
            this.getAll();
          });
        },
        immediate: true
      }
    },

    computed: {
      tableColumn() {
        return _(this.tableData.list)
          .map('game')
          .without('棋牌开元')
          .value();
      },
      cTableColumn() {
        return [
          {
            rowTitle: '公司盈亏',
            ..._.chain(this.tableData.list)
              .keyBy('game').mapValues('win').value(),
            //win
          },
          {
            rowTitle: '有效投注额',
            ..._.chain(this.tableData.list)
              .keyBy('game').mapValues('effectAmount').value(),
            //effectAmount
          },
        ];
      },
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });
    }
  };

</script>

